<template>
  <div class="steps-view">
    <div v-for="(item, index) in list" :key="index" class="item" :class="{ active: modelValue >= item.value }">
      <div class="box">
        <span v-if="modelValue < item.value" class="text">{{ index + 1 }}</span>
        <svg-icon v-else class="icon" :name="item.icon"></svg-icon>
      </div>
      <div class="label">{{ item.label }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  list: {
    type: Array as any,
    default: () => {
      return [];
    },
  },
  modelValue: {
    type: [String, Number],
    default: 1,
  },
});
</script>

<style lang="less" scoped>
.steps-view {
  display: flex;
  align-items: center;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;

    & + .item {
      padding-left: 160px;

      &::before {
        content: '';
        width: 140px;
        height: 1px;
        background: #c6ced9;
        position: absolute;
        left: 10px;
        top: 15px;
      }
    }

    &.active {
      &::before {
        background: #333;
      }

      .box {
        border-color: transparent;
        background: var(--td-brand-color);

        .text {
          display: none;
        }
      }

      .label {
        color: #333;
      }
    }

    .box {
      width: 30px;
      height: 30px;
      border-radius: 100%;
      border: 1px solid #c6ced9;
      color: #c6ced9;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .label {
      font-size: 12px;
      color: #767676;
      line-height: 18px;
    }
  }
}
</style>
